<template>
	<div class="person">
		<p>情况一：监视ref定义的基本类型数据</p>
		<p>
			Ask a yes/no question
			<input v-model="question" :disabled="loading" />
		</p>
		<p>{{ answer }}</p>
	</div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
const question = ref('')
const answer = ref('Questions usually contain a question mark. ;-)')
const loading = ref(false)
watch(question, async (newQuestion, oldQuestion) => {
	if (newQuestion.includes('?')) {
		loading.value = true
		answer.value = 'Thinking...'
		try {
			const res = await fetch('https://yesno.wtf/api')
			answer.value = (await res.json()).answer
		} catch (error) {
			answer.value = 'Error! Could not reach the API. ' + error
		} finally {
			loading.value = false
		}
	}
})
</script>
<style>
.person {
	padding: 10px;
}
</style>
